<script setup lang="ts">
import { reactive } from 'vue'
//引入返回上一页icon
import iconBackto from '@/components/icon-backto/index.vue'
import { onLoad } from '@dcloudio/uni-app'
//引入api 发送请求获取message列表
import { getMessageById } from '@/apis/message/index'

interface MessageDetail {
    data: {
        title: string
        content: string
        createTime: string
    }
}
//messageDetail列表数据
const messageDetail = reactive<MessageDetail>({
    data: {} as MessageDetail['data'],
})
const style = reactive({
    img: ' width: 620rpx;height: auto',
    span: 'font-size: 30rpx',
})

onLoad(async (value) => {
    uni.$emit('updateTitle')
    //value.noticeId转换成number类型
    const data = await getMessageById(value?.noticeId)
    if (data.code === 200) {
        messageDetail.data = data.data
    } else {
        uni.showToast({
            title: '服务器出错',
            icon: 'none',
            duration: 2000,
        })
    }
    console.log(data)
})
</script>

<template>
    <view class="content">
        <view class="content__top">
            <icon-backto :type="1" :url="`/basePackage/pages/messagepush/index`"></icon-backto>
        </view>
        <view class="content__bottom">
            <scroll-view class="bottom" :scroll-y="true">
                <view class="content__bottom--title">{{ messageDetail.data.title }}</view>
                <u-parse :html="messageDetail.data.content" class="content__bottom--detail" :tag-style="style"></u-parse>
                <view class="content__bottom--last">
                    <view class="left-span">平台名称</view>
                    <view class="right-span">{{ messageDetail.data.createTime }}</view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<style lang="scss" scoped>
@include b(bottom) {
    height: 1050rpx;
}
@include b(content) {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 16rpx 16rpx 16rpx;
    font-size: 24rpx;
    @include e(top) {
        margin-top: 72rpx;
        height: 90rpx;
        display: flex;
        margin-bottom: 32rpx;
    }
    @include e(bottom) {
        width: 722rpx;
        height: 1140rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        color: #101010;
        padding: 42rpx;
        @include m(title) {
            color: rgba(51, 51, 51, 1);
            font-weight: 700;
            margin-bottom: 28rpx;
        }
        @include m(detail) {
            color: #999999;
            margin-bottom: 58rpx;
        }
        @include m(last) {
            display: flex;
            justify-content: flex-end;
        }
    }
}
.left-span {
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
}
.right-span {
    margin-left: 16rpx;
}
</style>
